﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Widget</title>
    <script type="text/javascript" src="Scripts/helper.js"></script>
    <link href="/Content/Widget.css" rel="stylesheet" />
</head>
<body>
    <div id="wrapper">
        <div id="searchBar">
            <input type="text" id="searchTxt" placeholder="Sök..." class="generalTxtBox" />
            <select id="dropDown">
                <option value="Title">Titel</option>
                <option value="ISBN">ISBN</option>
            </select>
            <input type="button" value="Sök" onclick="search()" class="generalBtn" />
        </div>
        <br />
        <div id="tableDiv">
            <table id="myTable">
                <tbody>
                    <tr></tr>
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript">

        function search() {
            var srch = document.getElementById("searchTxt").value;            
            var select = document.getElementById("dropDown");
            var slctOpt = select.options[select.selectedIndex].value;
            var url = "/api/book/" + encodeURIComponent(slctOpt) + "/" + encodeURIComponent(srch);

            deleteRows();
            helper.jsonp(url, doThis);
        }

        function doThis(data) {
            //console.log(data);
            //alert(data[0].Title);

            data.forEach(function (entry) {
                var table = document.getElementById("myTable"),
                    row = table.insertRow(table.rows.length);
                createCell(row, entry.Title);
            });
        }


        function createCell(cell, text) {
            var div = document.createElement('div'),
                txt = document.createTextNode(text);
            div.appendChild(txt);
            cell.appendChild(div);
        }

        function deleteRows() {
            var tbl = document.getElementById('myTable'),
                lastRow = tbl.rows.length - 1, 
                i;

            for (i = lastRow; i > 0; i--) {
                tbl.deleteRow(i);
            }
        }
       
    </script>


</body>
</html>
